<template>
    <view class="tip_popup">
        <uni-popup ref="popupRef" :is-mask-click="false" animation type="center">
            <view class="popup_box">
                <view class="container">
                    <view class="success">
                        {{ text }}
                    </view>
                    <view v-if="messageTip" class="message_tip" v-html="messageTip"></view>
                </view>
                <view v-if="showBtn" class="btn" @tap="tapBack">
                    {{ btnText }}
                </view>
            </view>
        </uni-popup>
    </view>
</template>

<script setup>
import { computed, nextTick, ref, watch } from 'vue';

const props = defineProps({
    modelValue: {
        type: Boolean,
        default: false,
    },
    // 是否展示成功图标
    showSuccessIcon: {
        type: Boolean,
        default: true,
    },
    // 是否展示按钮
    showBtn: {
        type: Boolean,
        default: false,
    },
    // 按钮文案
    btnText: {
        type: String,
        default: '返回',
    },
    text: {
        type: String,
        default: '加入成功',
    },
    messageTip: {
        type: String,
        default: '',
    },
});
const emits = defineEmits(['update:modelValue', 'backBtn']);

const popupRef = ref(null);
// 点击
function tapBack() {
    popupRef.value.close();
    emits('update:modelValue', false);
    emits('backBtn');
}
watch(
    () => props.modelValue,
    () => {
        if (props.modelValue) {
            nextTick(() => {
                popupRef.value.open();
                if (!props.showBtn) {
                    setTimeout(() => {
                        popupRef.value.close();
                        emits('update:modelValue', false);
                    }, 1500);
                }
            });
        }
    },
    {
        immediate: true,
        deep: true,
    },
);
</script>

<style lang="scss" scoped>
.tip_popup {
    .popup_box {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 594rpx;
        height: 346rpx;
        background-color: #fff;
        border-radius: 20rpx;
        text-align: center;

        .container {
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            image {
                width: 60rpx;
                height: 60rpx;
            }

            .success {
                margin-top: 30rpx;
                color: #21d17a;
                font-size: 34rpx;
                font-weight: 600;
            }
            .message_tip {
                margin-top: 20rpx;
                font-size: 30rpx;
                color: #333;
            }
        }

        .btn {
            width: 100%;
            height: 108rpx;
            line-height: 108rpx;
            border-top: 1px solid #eeeeee;
            color: #333333;
            font-size: 34rpx;
        }
    }
}
</style>
